<template>
	<view>
		<view class="">
			<view class="dis_flex mt24 fz28 ml40 mr40">
				<view class="tf_999">商品库存有限，请您尽快下单</view>
				<view v-show="edit" class="tf_22" @click="edit=false">编辑</view>
				<view v-show='!edit' class="tf_22" @click="edit=true">完成</view>
			</view>
			<view class="ml24 mr24 mt20">
				<view class="dis_f bac_f mt24 bs6 padding30 radius16" v-for="(item,index) in cart_list" :key="index">
					<view class="w40 h40 bz radius501 border1" @click="chooseProduct(item,index)"
						:class="{ active: item.is_checked==1 }"></view>
					<image class="ml30 w180 h180 radius8" :src="item.gg_image" mode="aspectFill">
					</image>
					<view class="ml24 dfd_c jcsb" style="min-height: 180rpx; min-width: 368rpx">
						<view class="fz28 tf_333" style="max-width: 368rpx">{{item.name}}</view>
						<view class="dis_flex w">
							<view class="fz34 fw tf1">¥ {{item.price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w h200">

		</view>
		<view class="bac_f dis_flex bs6 padding24 p_f" style="width: 750rpx;">
			<view class="dis_f" @click="checkAll">
				<view class="w40 h40 bz radius501 border1" :class="{ active: chst==0 }"></view>
				<view class="fz26 tf_666 ml24"> 全选 </view>
			</view>
			<view v-show="edit" class="dis_f mr30">
				<view class="fz26"> 合计： </view>
				<view class="dfd_c ac fz40 fw tf_4537"> ￥{{total.toFixed(2)}} </view>
				<view class="col-th radius8 w240 h88 tf fz32 dis_f jc ml24 mr24" @click="goOederCf">结算</view>
			</view>
			<view v-show="!edit" class="w160 radius8 jc border9 dis_f fz26 tf_22 mr40" style="height: 68rpx;"
				@click="delProdect">
				删除
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price_arr:[],//价格数组
				total:0,
				xz_active: true, //判断是否被选中
				edit: true,
				cart_list: [],
				chst: 1,
				cur_pro_list: [], //当前选中商品列表
				page_obj: [], //页面参数对象
				cart_remove_list:[],
			};
		},
		onLoad() {
			this.getCartinfo();
		},
		methods: {
			//结算商品
			goOederCf() {
				console.log(this.cart_list);
				if(this.cart_list.length!==0){
					this.cur_pro_list.forEach((v, i) => {
						console.log(v);
						console.log(this.cart_list);
						this.page_obj.push(this.cart_list[v]);
					});
					uni.setStorageSync('pay_pro_info', this.page_obj);
					this.delProdect()
					uni.navigateTo({
						url:'../orderConfirm/orderConfirm'
					})
				}else{
					uni.showModal({
						title:'提示',
						content:'您还没有选择商品'
					})
				}
			},
			//删除商品
			delProdect() {
				this.total = 0
				this.cur_pro_list.sort()
				for (let i = this.cur_pro_list.length - 1; i >= 0; i--) {
					this.cart_list.splice(this.cur_pro_list[i], 1)
				}
				this.cur_pro_list = []
				uni.setStorageSync('cart_info',this.cart_list);
			},
			//全部选择
			checkAll() {
				if (this.chst) {
					this.cur_pro_list = []
					this.chst = 0;
					this.cart_list.forEach((val, i) => {
						console.log(val);
						val.is_checked = 1;
						this.cur_pro_list.push(i)
						console.log(this.cur_pro_list);
					});
					this.total = this.cart_list.reduce((sum,value)=>
						sum+Number(value.price)
					,0)
				} else {
					this.chst = 1;
					this.cart_list.forEach((val) => {
						val.is_checked = 0;
						this.cur_pro_list = []
						this.total=0
					});
					console.log(this.cur_pro_list);
				}
			},
			//选择商品
			chooseProduct(e, i) {
				console.log(e);
				if (e.is_checked) {
					e.is_checked = 0
					let getLocation = this.cur_pro_list.indexOf(i);
					this.cur_pro_list.splice(getLocation,1);
					this.total-=Number(e.price)
				} else {
					e.is_checked = 1
					this.cur_pro_list.push(i)
					this.total += Number(e.price)
				}
				console.log(this.cur_pro_list);
				//全选中：false 为选中 true  //取反   every==1 全选 true  全不选或选一个false
				this.chst = !this.cart_list.every((item) => item.is_checked == 1);
			},
			//获取购物车信息
			getCartinfo() {
				let cart_info = uni.getStorageSync('cart_info')
				if(cart_info.length!==0){
					console.log(cart_info);
					cart_info.forEach(v => {
						v.is_checked = 0
					})
					console.log(cart_info);
					this.cart_list = cart_info
				}
			}
		},
	};
</script>

<style lang="scss">
	.active {
		background-image: url(@/static/image/xuanzhong.png);
		background-size: cover;
		border: none;
	}
</style>
